<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>3D翻转卡2</title>
		<style type="text/css">
			h1 {
  font-size: 25px;
  text-align: left;
  text-transform: capitalize;
}

.service-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.service-icon {
  width: 100%;
  height: 220px;
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
}

.service-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 220px;
  padding: 20px;
  text-align: center;
  transition: all .5s ease;
  background-color: #474747;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform: translateY(110px) rotateX(-90deg);
  -moz-transform: translateY(110px) rotateX(-90deg);
  -ms-transform: translateY(110px) rotateX(-90deg);
  -o-transform: translateY(110px) rotateX(-90deg);
  transform: translateY(110px) rotateX(-90deg);
}

.service-box .service-icon .front-content {
  position: relative;
  top: 80px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.service-box .service-icon .front-content i {
  font-size: 28px;
  color: #fff;
  font-weight: normal;
}

.service-box .service-icon .front-content h3 {
  font-size: 15px;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.service-box .service-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.service-box .service-content p {
  font-size: 13px;
  color: #b1b1b1;
  margin: 0;
}

.yellow {
  background-color: #ffc000;
}

.orange {
  background-color: #fc7f0c;
}

.red {
  background-color: #e84b3a;
}

.grey {
  background-color: #474747;
}

.service-box:hover .service-icon {
  opacity: 0;
  -webkit-transform: translateY(-110px) rotateX(90deg);
  -moz-transform: translateY(-110px) rotateX(90deg);
  -ms-transform: translateY(-110px) rotateX(90deg);
  -o-transform: translateY(-110px) rotateX(90deg);
  transform: translateY(-110px) rotateX(90deg);
}

.service-box:hover .service-content {
  opacity: 1;
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}
		</style>
	</head>
	<body>
		  <!---  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
		 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->
  <div class="container">
    <h1>Service box</h1>
    <div class="row">
      <div class="col-md-3 col-sm-6 ">
        <div class="service-box">
          <div class="service-icon yellow">
            <div class="front-content">
              <i class="fa fa-trophy"></i>
              <h3>design</h3>
            </div>
          </div>
          <div class="service-content">
            <h3>design</h3>
            <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 ">
        <div class="service-box">
          <div class="service-icon orange">
            <div class="front-content">
              <i class="fa fa-anchor"></i>
              <h3>php</h3>
            </div>
          </div>
          <div class="service-content">
            <h3>php developer</h3>
            <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="service-box ">
          <div class="service-icon red">
            <div class="front-content">
              <i class="fa fa-trophy"></i>
              <h3>Ui Developer</h3>
            </div>
          </div>
          <div class="service-content">
            <h3>Developer</h3>
            <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="service-box">
          <div class="service-icon grey">
            <div class="front-content">
              <i class="fa fa-paper-plane-o"></i>
              <h3>java script</h3>
            </div>
          </div>
          <div class="service-content">
            <h3>java script</h3>
            <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
          </div>
        </div>
      </div>
    </div>
  </div>

	</body>
</html>
